<template>
    <div class="forum-container">
        <div class="header">
            <h1 class="title">论坛交流</h1>
            <van-icon name="search" class="search-icon" @click="handleSearch" />
        </div>
        <div class="content">
            <van-search v-model="searchQuery" placeholder="搜索帖子" class="search-bar" :border="false" />
            <div class="forum-tabs">
                <van-tabs v-model="activeTab" @change="handleTabChange">
                    <van-tab title="板块" />
                    <van-tab title="热门" />
                    <van-tab title="最新" />
                </van-tabs>
            </div>
            <div class="forum-content">
                <div v-if="activeTab === 0" class="section-container">
                    <h2 class="section-title">论坛板块</h2>
                    <div class="section-list">
                        <van-cell v-for="section in sections" :key="section.id" :title="section.name"
                            :value="`${section.postCount || 0}帖子`" class="section-item"
                            @click="navigateToSection(section.id)">
                            <template #right-icon>
                                <van-icon name="arrow-right" />
                            </template>
                        </van-cell>
                    </div>
                </div>
                <div v-else class="post-list">
                    <van-card v-for="post in posts" :key="post.id" class="post-card" @click="navigateToPost(post.id)">
                        <div class="post-header">
                            <div class="avatar">{{ post.authorAvatar }}</div>
                            <div class="author-info">
                                <div class="author-name">{{ post.author }}</div>
                                <div class="post-time">{{ post.time }}</div>
                            </div>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title">{{ post.title }}</h3>
                            <p class="post-excerpt">{{ post.excerpt }}</p>
                        </div>
                        <div class="post-footer">
                            <div class="post-meta">
                                <span class="meta-item">{{ post.viewCount || 0 }} 阅读</span>
                                <span class="meta-item">{{ post.replyCount || 0 }} 回复</span>
                                <span class="meta-item">{{ post.likeCount || 0 }} 点赞</span>
                            </div>
                        </div>
                    </van-card>
                    <div v-if="posts.length === 0" class="empty-state">
                        <van-empty description="暂无帖子" />
                    </div>
                </div>
            </div>
        </div>
        <div class="floating-button">
            <van-icon name="edit-circle" size="24" @click="createPost" />
        </div>
        <van-tabbar v-model="activeTabBar" class="bottom-tabbar">
            <van-tabbar-item icon="home-o" text="首页" to="/home" />
            <van-tabbar-item icon="search" text="考试" to="/examList" />
            <van-tabbar-item icon="edit" text="日报" to="/dailyReport" />
            <van-tabbar-item icon="chat-o" text="论坛" to="/forum" />
            <van-tabbar-item icon="user" text="我的" to="/profile" />
        </van-tabbar>
    </div>
</template>

<script>
import { showToast, showLoadingToast, } from 'vant'
import { getForumCategories, getForumPosts } from '../../api/forumApi'

export default {
    name: 'ForumPage',
    data() {
        return {
            searchQuery: '',
            activeTab: 0,
            activeTabBar: 3,
            sections: [],
            posts: []
        }
    },
    mounted() {
        // 获取论坛板块列表
        this.loadForumCategories()
        // 默认加载热门帖子
        if (this.activeTab !== 0) {
            this.loadPosts()
        }
    },
    methods: {
        handleTabChange() {
            if (this.activeTab === 0) {
                // 切换到板块 tab 时，加载板块数据
                if (this.sections.length === 0) {
                    this.loadForumCategories()
                }
            } else {
                // 切换到热门或最新 tab 时，加载帖子数据
                this.loadPosts()
            }
        },
        handleSearch() {
            // 搜索功能实现
            showToast('搜索功能开发中')
        },
        createPost() {
            // 跳转到创建帖子页面
            // showToast('创建帖子功能开发中')
            this.$router.push('/forum/create')
        },
        navigateToSection(sectionId) {
            // 跳转到板块详情页
            // showToast(`查看板块 ${sectionId} 功能开发中`)
            this.$router.push(`/forum/section/${sectionId}`)
        },
        navigateToPost(postId) {
            // 跳转到帖子详情页
            // showToast(`查看帖子 ${postId} 功能开发中`)
            this.$router.push(`/forum/post/${postId}`)
        },
        loadForumCategories() {
            showLoadingToast({ message: '加载中...', duration: 0 })
            getForumCategories()
                .then(res => {
                    if (res.success && res.data) {
                        this.sections = res.data
                    } else {
                        showToast('获取论坛板块失败')
                    }
                })
                .catch(err => {
                    showToast('获取论坛板块失败')
                    console.error('获取论坛板块失败:', err)
                })
        },
        loadPosts() {
            // 根据当前标签获取相应的帖子排序方式
            const order = this.activeTab === 1 ? 'hot' : 'latest'

            showLoadingToast({ message: '加载中...', duration: 0 })
            getForumPosts({
                order,
                page: 1,
                pageSize: 10
            })
                .then(res => {
                    if (res.success && res.data && res.data.list) {
                        this.posts = res.data.list
                    } else {
                        showToast('获取帖子列表失败')
                        this.posts = []
                    }
                })
                .catch(err => {
                    showToast('获取帖子列表失败')
                    this.posts = []
                    console.error('获取帖子列表失败:', err)
                })
        }
    }
}
</script>

<style scoped>
.forum-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
}

.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title {
    font-size: 18px;
    font-weight: bold;
}

.search-icon {
    color: white;
    font-size: 20px;
}

.content {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
}

.search-bar {
    margin-bottom: 15px;
    background-color: white;
    border-radius: 8px;
    padding: 5px 15px;
}

.forum-tabs {
    background-color: white;
    margin-bottom: 15px;
}

.section-container,
.post-list {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.section-item {
    border-bottom: 1px solid #f0f0f0;
}

.section-item:last-child {
    border-bottom: none;
}

.post-card {
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
}

.post-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.avatar {
    width: 36px;
    height: 36px;
    background-color: #667eea;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.post-time {
    font-size: 12px;
    color: #888;
}

.post-content {
    margin-bottom: 10px;
}

.post-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.post-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-meta {
    display: flex;
    gap: 15px;
}

.meta-item {
    font-size: 12px;
    color: #888;
}

.floating-button {
    position: fixed;
    bottom: 70px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #667eea;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 20;
}

.bottom-tabbar {
    background-color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.empty-state {
    padding: 30px 0;
    text-align: center;
}
</style>